<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Basecode</title>
    <link rel="stylesheet" href="basecode.css">
</head>
<body>

<input type="text" id="multi-input">
<button class="btn">左侧入</button>
<button class="btn split">右侧入</button>
<button class="btn">左侧出</button>
<button class="btn">右侧出</button>
<ul id="list-hook">

</ul>

<script>
    window.onload = function () {
        var inputDom = document.getElementById('multi-input');
        var btnDoms = document.getElementsByClassName('btn');
        var ulDom = document.getElementById('list-hook');
        var liDoms = document.getElementsByTagName('li');
        var addLi = function (number) {
            var index = number;
            var reg=/^[0-9]+$/;
            return function () {
                var newDom;
                if(!reg.test(inputDom.value)){
                    alert("请输入数字");
                    return;
                }
                switch (index) {
                    case 0: {
                        newDom = document.createElement("Li");
                        newDom.className += 'list-item';
                        newDom.innerHTML = inputDom.value;
                        ulDom.insertBefore(newDom, ulDom.childNodes[0]);
                        break;
                    }
                    case 1: {
                        newDom = document.createElement("Li");
                        newDom.className += 'list-item';
                        newDom.innerHTML = inputDom.value;
                        ulDom.appendChild(newDom);
                        break;
                    }
                    case 2: {
                        if (liDoms[0]) {
                            liDoms[0].remove(liDoms[0]);
                        }
                        break;
                    }
                    case 3: {
                        if (liDoms[0]) {
                            liDoms[liDoms.length - 1].remove(liDoms[liDoms.length - 1]);
                        }
                        break;
                    }
                }
            }

        };
        for (var i = 0; i < btnDoms.length; i++) {
            (function (i) {
                btnDoms[i].addEventListener('click', addLi(i))
            })(i)
        }
    }
</script>
</body>
</html>